<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>办件评价</title>
		<link rel="stylesheet" type="text/css" href="../../css/feedback.css" />
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			.mui-bar-nav~.mui-content{padding:0;margin-top:45px;background:#f5f5f5;}
			
			.mui-table-view-cell{overflow: inherit;}
			.title_box{background: #fff;width: 7.5rem;height: 2rem;padding-left: 0.24rem;padding-top: 0.31rem}
			.bg_blue{background:#f8c96f;}
			.bg_blue01{background:#79c3f7;}
			.bg_green{background:#60e9e1;}
			.mui-media-box{padding:.38rem 0 0 .38rem;float:left;width: 100%;}
			.navigate_img{width:.43rem;height:.43rem;display:block;border-radius:.04rem;float:left;margin-right:.13rem;margin-top:.01rem;}
			.navigate_img>img{width:.25rem !important;margin:0.09rem 0 0 0.09rem;}
			.title_box .mui-media-body{width:6.2rem;float:left;overflow:visible;}
			.title_box .mui-media-body>div{width:100%;float:left;}
			.title_box .mui-media-body .body_view{font-size:.3rem;}
			.title_box .mui-media-body .body_view>span,.title_box .mui-media-body .mui-ellipsis>span{float:left;width:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
			.title_box .mui-media-body .work_time{color:#b0b0b0;font-size:.24rem;}
			.title_box .mui-media-body .mui-ellipsis{color:#666;font-size:.24rem;overflow:visible;}
			.title_box .icon-more{width:.45rem;float:right;height:.45rem;position:relative;}
			.title_box .icon-more>img{margin-top:-.03rem;}
			.title_box .zhuangtai{width:1.68rem;float:right;text-align:right;font-size:.28rem;margin-top:-.07rem;overflow:hidden;}			
			.info{width: 100%;height: 0.78rem;background: #eeeeee;color: #333333;font-size: 0.28rem;padding-left: 0.24rem;line-height: 0.78rem;}		
			.time{background: #fff;width: 100%;height: 1.1rem;line-height: 1.1rem;padding-left: 0.24rem;padding-right: 0.24rem;}
			.time input{width: 1rem;height: 0.64rem;float: right;margin-top: 0.21rem;margin-right: 0.21rem;}
			.time span:first-child{float: left;}
			.time span:nth-child(2){float: right;}
			.mui-table-view-cell.mui-active{background-color: #fff;}
			
			.mui-table-view .mui-table-view-cell{font-size: 0.28rem;}
			.btn_box{padding-left: 0.69rem;height: 1.34rem;}
			.btn_box div{width: 0.46rem;height: 0.45rem;float: left;margin-right: 0.9rem;position: relative;}
			.btn_box div:last-child{margin: 0;}
			.btn_box .aixin{width: 0.52rem;height: 0.45rem;}
			.zan{background: url(../../images/work/zan.png) no-repeat center center;background-size: cover;}
			.flower{background: url(../../images/work/flower.png) no-repeat center center;background-size: cover;}
			.aixin{background: url(../../images/work/aixin.png) no-repeat center center;background-size: cover;}
			.buhao{background: url(../../images/work/buhao.png) no-repeat center center;background-size: cover;}
			.no{background: url(../../images/work/no.png) no-repeat center center;background-size: cover;}
			.btn_box div span{display: block;width: 2rem;text-align: center;position: absolute;left: -0.8rem;bottom: -0.5rem;}
		
			.banshi{margin-top: 0.1rem;}
			.banshi_title span:first-child{font-size: 0.3rem;}
			.banshi_title span:last-child{font-size: 0.28rem;color: #d0d0d0;}
			.banshi_star{height: 0.87rem;}
			.banshi_star div{float: left;margin-right: 0.2rem;width: 0.4rem;height: 0.4rem;background: url(../../images/work/star0.png) no-repeat center center;background-size: cover;}
		
			.text_box{width: 100%;height: 4.01rem;background: #fff;margin-top: 0.1rem;padding-left: 0.24rem;padding-top: 0.3rem;}
			.text_box textarea{background: #eee;border: none;width: 7.07rem;height: 2.24rem;margin-top: 0.2rem;}
			.time_cishu{float: right; width: 3.2rem; height: .65rem;}
			.time_cishu .mui-numbox{width: 2.6rem;}
			.mui-numbox{border:1px solid #007bff;border-radius: 0;}
			.mui-numbox [class*=numbox-btn]{background-color: #007bff;border-radius: 0; color: #fff;}
			.mui-numbox .mui-numbox-input{border: none!important;}
			.mui-btn-blue{padding: .2rem 0; width: 6rem; margin:.5rem auto;}
			.btn_box .active:nth-of-type(1){background: url(../../images/work/zan1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(2){background: url(../../images/work/flower1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(3){background: url(../../images/work/aixin1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(4){background: url(../../images/work/buhao1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(5){background: url(../../images/work/no1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.text_box{position: relative;}
			.text_box .tips{position: absolute; right: .3rem; bottom: .95rem; font-size: .24rem; color: #999999;}														
		</style>
	</head>
	<body>
		<div class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">网上申报</h1>
		</div>
		<div class="mui-content" id="content">
			<input type="hidden" name="pjTerm" id="pjTerm" value="5"/>
		    <input type="hidden" name="bzxl" id="bzxl" value="0"/>
		    <input type="hidden" name="znfhd" id="znfhd" value="0"/>
		    <input type="hidden" name="fwzl" id="fwzl" value="0"/>
		    <input type="hidden" name="xccs" id="xccs" value="0"/>
		    <input type="hidden" name="wsbs" id="wsbs" value="0"/>
			<div class="title_box" id="itemContents">
				<span class="navigate_img bg_blue">
				<img class="tjfwl" src="../../images/work/icon-shh-@2x.png">
				</span>
				<div class="mui-media-body">
					<div class="body_view">
						<span id="serviceName">{{zwfwCase.serviceName}}</span>
						<div class="icon-more"></div></div>
					<div class="work_time">{{zwfwCase.applyTime}}</div>
					<div class='mui-ellipsis'>
						<span>办件编号: {{zwfwCase.caseNum}}</span>
					</div>
				</div>
			</div>
			<div class="info">您的评价将有助于提升我们的服务</div>
			<div class="time">
				<span>到现场次数</span>
				<div class="time_cishu">
					<div class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='20'>
					  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
					  <input class="mui-numbox-input" type="number" id="xcCounts"/>
					  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
					</div>				
					<span>次</span>					
				</div>
			</div>
			<ul class="mui-table-view manyi">
			    <li class="mui-table-view-cell">满意度评价</li>
			    <li class="mui-table-view-cell btn_box">
			    	<div class="eva zan active" valNum="5">
			    		<span>非常满意</span>
			    	</div>
			    	<div class="eva flower" valNum="4">
			    		<span>满意</span>
			    	</div>
			    	<div class="eva aixin" valNum="3">
			    		<span>基本满意</span>
			    	</div>
			    	<div class="eva buhao" valNum="2">
			    		<span>不满意</span>
			    	</div>
			    	<div class="eva no" valNum="1">
			    		<span>非常不满意</span>
			    	</div>
			    </li>
			</ul>
			<ul class="mui-table-view banshi">
			    <li class="mui-table-view-cell banshi_title">
			    	<span>办事效率</span>
			    	<br />
			    	<span>实际办结时间与承诺时间符合度</span>
			    </li>
				<div starName="bzxl" class="icons mui-inline" style="margin-left: 6px; padding: .2rem;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</ul>
			<ul class="mui-table-view banshi">
			    <li class="mui-table-view-cell banshi_title">
			    	<span>办事指南符合度</span>
			    	<br />
			    	<span>实际办事的材料要求和流程与公开的办事指南符合度</span>
			    </li>
				<div starName="znfhd" class="icons mui-inline" style="margin-left: 6px; padding: .2rem;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</ul>
			<ul class="mui-table-view banshi">
			    <li class="mui-table-view-cell banshi_title">
			    	<span>服务质量</span>
			    	<br />
			    	<span>对在线咨询，现场办理情况进行评价</span>
			    </li>
				<div starName="fwzl" class="icons mui-inline" style="margin-left: 6px; padding: .2rem;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</ul>
			<ul class="mui-table-view banshi">
			    <li class="mui-table-view-cell banshi_title">
			    	<span>去现场次数满意度</span>
			    	<br />
			    	<span>办事要求去现场次数数量是否合理满意</span>
			    </li>
				<div starName="xccs" class="icons mui-inline" style="margin-left: 6px; padding: .2rem;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</ul>
			<ul class="mui-table-view banshi">
			    <li class="mui-table-view-cell banshi_title">
			    	<span>网上办事</span>
			    	<br />
			    	<span>对网上办事进行总体评价</span>
			    </li>
				<div starName="wsbs" class="icons mui-inline" style="margin-left: 6px; padding: .2rem;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</ul>
			<div class="text_box">
				<span>评价内容</span>
				<textarea name="" rows="" cols="" placeholder="请输入评价内容" id="evaluateContent"></textarea>	
				<span class="tips">最多不超过50个字</span>
			</div>
			<button type="button" id="submitInfo" class="mui-btn mui-btn-blue mui-btn-block ripple">完成评价</button>			
		</div>
		
		
	</body>
	<script>
		var my_immersed = function(immersed) {
			document.getElementById("header").style.paddingTop = immersed + 'px';
			document.getElementById("header").style.height = (immersed + 44)+'px';
			document.getElementById("content").style.paddingTop = (immersed) + 'px';
		}
	</script>
	<script type="text/javascript" src="../../js/immersed.js" ></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/app.js"></script>	
	<script src="../../js/jquery2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/feedback.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/vue.min.js"></script>
	<script type="text/javascript">
		mui.plusReady(function() {
			    //获取从上一个页面获取到参数
				var oid = plus.webview.currentWebview().oid;
				//加载办件信息
				if(oid)
				loadData(oid);
				closeWaitingAndShowView()
			});
			
			var itemContents = new Vue({
				el: '#itemContents',
				data: {
					zwfwCase: {} //评价基本信息
				}
			});
			
		/**
		 * 加载办件数据
		 * @param {Object} oid 评价主键
		 */
		function loadData(oid){
			var param = jsonToParams({
				'oid':oid,				
			    });
			var url = 'appHttpService/initCaseEvaluate.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.state == 0) {					
					var zwfwCase = data.zwfwCaseVo;					
					itemContents.zwfwCase = {
						oid:zwfwCase.caseId,
						serviceName:zwfwCase.serviceName,
						caseNum: zwfwCase.caseNum,
						applyTime:utils.format(zwfwCase.applyTime,'yyyy-MM-dd HH:mm:ss'),												
					};																							
				}else{
					mui.alert('未找到相关信息',null,null,function(){
						//mui.back();
					},'div')
				}
			}, param);
		}
		
		//提交评价
		document.getElementById('submitInfo').addEventListener("tap",function(){
			//办件Id
			var caseId = plus.webview.currentWebview().oid;
			//用户Id
			var userId = getUserId();
			//到现场次数
			var xcCounts = document.getElementById('xcCounts').value;
			//满意度
			var pjTerm = document.getElementById('pjTerm').value ;
			//打星项
			var bzxl = document.getElementById('bzxl').value ;
			var znfhd = document.getElementById('znfhd').value ;
			var fwzl = document.getElementById('fwzl').value ;
			var xccs = document.getElementById('xccs').value ;
			var wsbs = document.getElementById('wsbs').value ;	
			var serviceName = document.getElementById('serviceName').innerHTML;
			//评价内容
			var content = document.getElementById('evaluateContent').value ;
//			if(pjTerm == ''){
//				mui.toast("选择满意度");
//				return false;
//			}
			if(bzxl == 0 || znfhd == 0  || fwzl== 0  || xccs == 0  || wsbs == 0 ){
				mui.toast("有评分项未打星");
				return false;
			}
			if(content == '' ){
				mui.toast("评价内容不能为空");
				return false;
			}
			if(content.length > 50){
				mui.toast("评价内容字数不能大于50");
				return false;
			}
		 
		  var param = jsonToParams({
	        	userId:userId,
	        	caseId:caseId,
	        	xcCounts:xcCounts,
	        	pjTerm:pjTerm,
	        	bzxl:bzxl,
	        	znfhd:znfhd,
	        	fwzl:fwzl,
	        	xccs:xccs,
	        	wsbs:wsbs,
	        	serviceName:serviceName,
	        	content:content
	        })
			var url = 'appHttpService/saveCaseEvaluate.do';
		    utils.ajax(url, function(dat) {
				dat = JSON.parse(dat);
				if(dat.state == 0) {//评价成功
				  location.href = 'evaluate_success.html';	
				}else{
					mui.toast("保存失败")
				}
			}, param);		
	    });
				
		$(".eva").on('tap',function(){
			$(this).addClass('active').siblings('.eva').removeClass('active')
			var pjTerm = $(this).attr('valNum');
			//设置满意度
			document.getElementById('pjTerm').value = pjTerm;
			
		})
		
		 //评分打星
		 mui('.icons').on('tap','i',function(){
		  	var index = parseInt(this.getAttribute("data-index"));
		  	var parent = this.parentNode;
		  	var children = parent.children;
		  	if(this.classList.contains("mui-icon-star")){
		  		for(var i=0;i<index;i++){
	  				children[i].classList.remove('mui-icon-star');
	  				children[i].classList.add('mui-icon-star-filled');
		  		}
		  	}else{
		  		for (var i = index; i < 5; i++) {
		  			children[i].classList.add('mui-icon-star')
		  			children[i].classList.remove('mui-icon-star-filled')
		  		}
		  	}
		  	starIndex = index;
		  	
		   //2017-10-05 add by ouyangl 给评分打星隐藏赋值
		   var starName = $(this).parents('.icons').attr("starName");
		   document.getElementById(""+starName+"").value = starIndex;
		   
	  });
	</script>
</html>